<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>滑块验证Demo</title>
		<!-- <link rel="stylesheet" href="styles.css"> -->
		<style>
			/* styles.css */
			.slider-container {
				width: 300px;
				margin: 50px auto;
				position: relative;
			}

			.slider-track {
				width: 100%;
				height: 10px;
				background-color: #ccc;
				position: relative;
				border-radius: 5px;
				cursor: pointer;
			}

			.slider-thumb {
				width: 20px;
				height: 20px;
				background-color: #007bff;
				position: absolute;
				top: -5px;
				left: 0;
				border-radius: 50%;
				cursor: pointer;
				user-select: none;
			}

			.slider-text {
				text-align: center;
				margin-top: 10px;
			}

			.slider-btn {
				display: block;
				width: 100%;
				margin-top: 20px;
				padding: 10px 0;
				background-color: #007bff;
				color: white;
				border: none;
				border-radius: 5px;
				cursor: pointer;
			}

			.slider-btn:disabled {
				background-color: #ccc;
				color: #666;
			}
		</style>
	</head>
	<body>
		<div class="slider-container">
			<div class="slider-track">
				<div class="slider-thumb" id="sliderThumb"></div>
			</div>
			<p class="slider-text">请拖动滑块验证</p>
			<button class="slider-btn" onclick="verifySlider()">完成</button>
		</div>

		<script>
			// script.js
			let isDragging = false;  
			let startX, sliderThumb, sliderTrackWidth;  
			  
			document.addEventListener('DOMContentLoaded', function() {  
			    sliderThumb = document.getElementById('sliderThumb');  
			    sliderTrackWidth = document.querySelector('.slider-track').offsetWidth;  
			  
			    sliderThumb.addEventListener('mousedown', function(e) {  
			        isDragging = true;  
			        startX = e.clientX - sliderThumb.offsetLeft;  
			  
			        document.addEventListener('mousemove', onMouseMove);  
			        document.addEventListener('mouseup', onMouseUp);  
			    });  
			});  
			  
			function onMouseMove(e) {  
			    if (!isDragging) return;  
			  
			    let x = e.clientX - startX;  
			    let limit = sliderTrackWidth - sliderThumb.offsetWidth;  
			  
			    if (x < 0) x = 0;  
			    if (x > limit) x = limit;  
			  
			    sliderThumb.style.left = x + 'px';  
			}  
			  
			function onMouseUp(e) {  
			    isDragging = false;  
			    document.removeEventListener('mousemove', onMouseMove);  
			    document.removeEventListener('mouseup', onMouseUp);  
			  
			    // 可以在这里添加验证逻辑  
			    // 例如，检查滑块是否到达特定位置  
			    if (parseInt(sliderThumb.style.left, 10) >= sliderTrackWidth - sliderThumb.offsetWidth) {  
			        document.querySelector('.slider-btn').disabled = false;  
			    } else {  
			        document.querySelector('.slider-btn').disabled = true;  
			    }  
			}  
			  
			function verifySlider() {  
			    // 验证逻辑，这里只是简单演示  
			    alert('验证成功！');  
			}
		</script>
	</body>
</html>